<template>
  <div class="container">
    <div class="py-5 text-center">
      <img
        src="https://jmeter.apache.org/images/logo.svg"
        class="d-block mx-auto mb-4"
        alt="Apache JMeter"
      />
      <p class="lead">
        The Apache JMeter™ application is open source software, a 100% pure Java
        application designed to load test functional behavior and measure
        performance. It was originally designed for testing Web Applications but
        has since expanded to other test functions.
      </p>
    </div>
    <div class="col-md-8 order-md-1">
      <h4 class="mb-3">上传脚本</h4>
      <form>
        <input id="jmeterId" type="file" @change="submitupload" />
        <button
          class="btn btn-lg btn-primary btn-block"
          type="button"
          @click="submitupload"
        >
          上传脚本
        </button>
      </form>
      <br />
      <!-- 添加空行 -->
      <form>
        <input id="jmeterParam" type="file" @change="submitParm" />
        <button
          class="btn btn-lg btn-primary btn-block"
          type="button"
          @click="submitParm"
        >
          上传参数文件
        </button>
      </form>
      <h4 class="mb-3">运行</h4>
      <form class="needs-validation" novalidate>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="jmeterName">压测脚本</label>
            <input
              type="text"
              class="form-control"
              id="jmeterName"
              placeholder="jmx file"
              v-model="jmeterName"
              required
            />
            <div class="invalid-feedback">jmx file</div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="numberName">并发数</label>
            <input
              type="text"
              class="form-control"
              id="numberName"
              placeholder="并发数"
              v-model="numberName"
              required
            />
            <div class="invalid-feedback">并发数</div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="duration">执行时间</label>
            <input
              type="text"
              class="form-control"
              id="duration"
              placeholder="执行时间"
              v-model="duration"
              required
            />
            <div class="invalid-feedback">执行时间</div>
          </div>
        </div>
        <hr class="mb-4" />
        <button class="btn btn-success" @click="JmeterRun">运行</button>
        <button class="btn btn-danger" @click="Jmeterstop">停止</button>
        <button class="btn btn-info" @click="JmeterInfo">查看信息</button>
      </form>
    </div>
    <!-- 日志模态框 -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Jmeter运行日志</h4>
          </div>
          <div class="modal-body">
            <textarea rows="30" cols="120" v-model="JmeterMsg"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jmeterName: "",
      numberName: "",
      duration: "",
      JmeterMsg: "",
    };
  },
  methods: {
    submitupload(event) {
      // 你的上传脚本逻辑
      var type = "file"; //后台接收时需要的参数名称，自定义即可
      var id = "jmeterId"; //即input的id，用来寻找值
      var formData = new FormData();
      var jmeterId = $("#jmeterId").val();
      if (jmeterId == "") {
        layer.msg(
          "Jmeter文件不能为空，请输入",
          { time: 2000, icon: 5, shift: 6 },
          function () {}
        );
        return;
      }
      formData.append(type, $("#" + id)[0].files[0]);
      $.ajax({
        type: "POST",
        url: "/jmeter/upload",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
          if (data.code == 100) {
            layer.msg("用户信息保存成功", { time: 1000, icon: 6 }, function () {
              // console.log("相应结果:" + data.extend.file);
              //通过返回结果进行赋值
              $("#jmeterName").val(data.extend.file);
              // window.location.href = "/jmeterIndex";
            });
          } else {
            layer.msg(
              "信息保存失败，请重新操作" + data.err,
              { time: 2000, icon: 5, shift: 6 },
              function () {}
            );
          }
        },
      });
    },
    submitParm(event) {
      // 你的上传参数逻辑
      var type = "file"; //后台接收时需要的参数名称，自定义即可
      var id = "jmeterParam"; //即input的id，用来寻找值
      var formData = new FormData();
      var jmeterPara = $("#jmeterParam").val();
      if (jmeterPara == "") {
        layer.msg(
          "Jmeter文件不能为空，请输入",
          { time: 2000, icon: 5, shift: 6 },
          function () {}
        );
        return;
      }
      formData.append(type, $("#" + id)[0].files[0]);
      $.ajax({
        type: "POST",
        url: "/jmeter/Paramupload",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
          if (data.code == 100) {
            layer.msg(
              "参数文件保存成功",
              { time: 1000, icon: 6 },
              function () {}
            );
          } else {
            layer.msg(
              "信息保存失败，请重新操作" + data.err,
              { time: 2000, icon: 5, shift: 6 },
              function () {}
            );
          }
        },
      });
    },
    JmeterRun() {
      // 你的运行逻辑
      let JmeterName = $("#jmeterName").val();
      let number = $("#numberName").val();
      let duration = $("#duration").val();

      console.log(JmeterName);
      console.log(number);
      $.ajax({
        type: "POST",
        url: "/jmeter/JmeterRun",
        data: {
          jmeterName: JmeterName,
          numberName: number,
          duration: duration,
        },
        success: function (result) {
          if (result.code == 100) {
            layer.msg("启动成功成功", { time: 1000, icon: 6 }, function () {});
          } else {
            layer.msg(
              "启动失败，请重新操作",
              { time: 2000, icon: 5, shift: 6 },
              function () {}
            );
          }
        },
      });
    },
    Jmeterstop() {
      // 你的停止逻辑
      $.ajax({
        type: "Get",
        url: "/jmeter/JmeterStop",
        processData: false,
        contentType: false,
        success: function (result) {
          if (result.code == 100) {
            layer.msg("停止成功", { time: 1000, icon: 6 }, function () {});
          } else {
            layer.msg(
              "停止失败，请重新操作",
              { time: 2000, icon: 5, shift: 6 },
              function () {}
            );
          }
        },
      });
    },
    JmeterInfo() {
      // 你的查看日志逻辑
      $.ajax({
        type: "Get",
        url: "/jmeter/Jmeterinfo",
        processData: false,
        contentType: false,
        success: function (result) {
          if (result.code == 100) {
            layer.msg("启动成功成功", { time: 1000, icon: 6 }, function () {
              $("#JmeterMsg").val(data.extend.infopage);
            });
          } else {
            layer.msg(
              "启动失败，请重新操作",
              { time: 2000, icon: 5, shift: 6 },
              function () {}
            );
          }
        },
      });
    },
  },
};
</script>

<style scoped>
/* 你的CSS样式 */
</style>
